<template>
	<el-tabs type="border-card" style="width: 100%" class="material-tabs" v-model="activeName">
		<el-tab-pane label="我的素材" name="mine">
			<List
				ref="mine"
				v-if="activeName === 'mine'"
				@tree-del="treeDel"
				:key="mineKey"
				:is_common="0"
				@tree-edit="treeEdit"
				@upload="upload"
				@open-drawer="openDrawer"
		/></el-tab-pane>
		<el-tab-pane label="公共素材" name="common"
			><List
				ref="common"
				:key="commonKey"
				@tree-edit="treeEdit"
				@tree-del="treeDel"
				v-if="activeName === 'common'"
				:is_common="1"
				@upload="upload"
				@open-drawer="openDrawer"
		/></el-tab-pane>
	</el-tabs>
	<Form ref="form" @close="refresh" />
</template>
<script setup lang="ts" name="">
import { ref, nextTick } from "vue";
import Form from "./components/Form/index.vue";
import List from "./components/List/index.vue";
import { dirDel, fileFirst } from "@/api/modules/upload";
import { ElMessage, ElMessageBox } from "element-plus";
import getFile from "@/utils/getFile";
import { getConfig, followUp ,stsMsg } from "@/api/modules/upload";
import { Upload  } from "@/api/interface/upload";
import { StStore } from "@/stores/modules/sts";
import mittBus from '@/utils/mittBus';

// import oss from "ali-oss";
import OSS from "ali-oss";

const stStore = StStore();
const form = ref<InstanceType<typeof Form>>();
const mine = ref<InstanceType<typeof List>>();
const common = ref<InstanceType<typeof List>>();
const activeName = ref<"mine" | "common">("mine");
const openDrawer = (is_common: 1 | 0, dir_pid: number|string) => {
	form.value?.open(is_common, dir_pid.toString());
};

const mineKey = ref<number>(0);
const commonKey = ref<number>(0);

const refresh = () => {
	nextTick(() => (activeName.value === "mine" ? mine.value?.treeFilter?.initData() : common.value?.treeFilter?.initData()));
};
const treeEdit = (is_common: 1 | 0, data: any) => {
	form.value?.open(is_common, data.dir_pid, data.dir_id, data);
};

const treeDel = async (is_common: 1 | 0, data: any) => {
	ElMessageBox.confirm("确认要删除该目录吗?", "温馨提示", { type: "warning" }).then(async () => {
		await dirDel({ ids: [data.dir_id] }, is_common);
		ElMessage.success("删除成功");
		activeName.value === "mine" ? ++mineKey.value:  ++commonKey.value;
		// else refresh();

	});
};

// const config = ref<Upload.File.GetConfig | undefined>();
// const checkType = ref<Array<string> | undefined>(undefined);
const client = ref<OSS|undefined>(undefined);

stStore.loadConfig((oss_config)=>{
	if(oss_config){
		client.value =  new OSS({
				// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
				region: 'oss-cn-guangzhou',
				// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
				accessKeyId: oss_config.accessKeyId,
				accessKeySecret: oss_config.accessKeySecret,
				// 从STS服务获取的安全令牌（SecurityToken）。
				stsToken: oss_config.securityToken,
				// 填写Bucket名称。
				bucket: oss_config.oss_bucket
			});

			console.log(client.value);
	}
});
// .then(()=>{
// 	  config.value =  stStore.uploadConfigGet;
// });


// const getConfigApi = async () => {
	// let res = await getConfig();
	// const { upload , oss} = res.data;
	// config.value = upload;
  //  client.value = new OSS({
	// 	// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
	// 	region: 'oss-cn-guangzhou',
	// 	// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
	// 	accessKeyId: config.value.accessKeyId,
	// 	accessKeySecret: config.value.accessKeySecret,
	// 	// 从STS服务获取的安全令牌（SecurityToken）。
	// 	stsToken: config.value.securityToken,
	// 	// 刷新临时访问凭证的时间间隔，单位为毫秒。
	// 	refreshSTSTokenInterval: 3000,
	// 	// 填写Bucket名称。
	// 	bucket: config.value.oss_bucket
	// });
	// checkType.value = res.data.upload_file_type.map(item => item.type);
// };

// getConfigApi();







const upload = (is_common: 1 | 0, dir_id: string|number) => {
   mittBus.emit("uploadFile",{is_common, dir_id });
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
